<template>

  <div class="right-chart-1" ref="chart">
  </div>
</template>

<script>
export default {
  name: 'RightChart1',
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init: function () {
      this.$axios.get('http://127.0.0.1:8000/metric/es_aggregation')
        .then(res => {
          this.chart = this.$echarts.init(this.$refs.chart)
          let option
          option = {
            title: { text: '7添加小易PC端在线', x: 'center', y: 'top', textAlign: 'left', textStyle: { fontSize: 22, color: '#fff', lineHeight: '40' } },
            color: ['#0f3780'],
            xAxis: {
              type: 'category',
              axisLabel: { textStyle: { color: '#fff' } },
              data: res.data.date
            },
            yAxis: { type: 'value', axisLabel: { textStyle: { color: '#fff' } } },
            series: [
              { itemStyle: { normal: { label: { show: true } } }, data: res.data.online, type: 'bar' }]
          }
          this.chart.setOption(option)
        })
        .catch(function (res) {
          console.log(res)
        })
    }
  }
}
</script>

<style lang="less">
.right-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .rc1-header {
    font-size: 24px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
  }

  .rc1-chart-container {
    flex: 1;
    display: flex;
  }

  .left {
    width: 30%;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .number {
      font-size: 34px;
      color: #096dd9;
      font-weight: bold;
      margin-bottom: 30px;
    }
  }

  .right {
    flex: 1;
    padding-bottom: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}
</style>
